<template>
    <el-dialog
        :visible.sync="is_show"
        title="编辑代理人"
        @closed="closed"
        center
    >
        <div>
            <el-form
                :model="form"
                label-position="left"
                :rules="rules"
                ref="form"
            >
                <el-form-item
                    prop="email_work"
                    label="工作邮箱"
                    label-width="120px"
                >
                    <el-input v-model="form.email_work" placeholder="请输入工作邮箱"></el-input>
                </el-form-item>
                <el-form-item
                    prop="type"
                    label="全职/兼职"
                    label-width="120px"
                >
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option label="全职" value="全职"></el-option>
                        <el-option label="兼职" value="兼职"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    prop="bank_card"
                    label="银行卡号"
                    label-width="120px"
                >
                    <el-input v-model="form.bank_card" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
                <el-form-item
                    prop="registered_bank"
                    label="开户银行"
                    label-width="120px"
                >
                    <el-input v-model="form.registered_bank" placeholder="请输入开户银行"></el-input>
                </el-form-item>
                <el-form-item
                    prop="alipay_num"
                    label="支付宝账号"
                    label-width="120px"
                >
                    <el-input v-model="form.alipay_num" placeholder="请输入支付宝账号"></el-input>
                </el-form-item>
                <el-form-item
                    prop="grade"
                    label="代理人等级"
                    label-width="120px"
                >
                    <el-select v-model="form.grade" clearable placeholder="请选择代理人等级">
                        <el-option label="初级" value="1"></el-option>
                        <el-option label="中级" value="2"></el-option>
                        <el-option label="高级" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    prop="is_take"
                    label="可接单数"
                    label-width="120px"
                >
                    <el-radio v-model="is_takeRadio" label="1">不限制接单数</el-radio>
                    <el-radio v-model="is_takeRadio" label="2">不可接单</el-radio>
                    <el-radio v-model="is_takeRadio" label="3">设置可接单数</el-radio>
                    <el-input class='is_take' v-if="is_takeRadio == 3" v-model="form.is_take"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template slot="footer">
            <el-button v-no-more-click:3000 @click="is_show = false">取消</el-button>
            <el-button v-no-more-click:3000 type="primary" @click="submit">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { validateEmail,validateBank,validateAlipayNum } from '~/util/index'
export default {

    data() {

        return {
            is_show: false,
            form: {
                email_work: '',
                type: '全职',
                bank_card: '',
                registered_bank: '',
                alipay_num:'',
                is_take: '',
                grade: ''
            },
            rules: {
                email_work: [{ required: true, validator: validateEmail, trigger: "blur" }],
                type: [{ required: true, message: "请输入全职或者兼职", trigger: "change" }],
                bank_card: [{ validator: validateBank, trigger: 'change'}],
                alipay_num: [{ validator: validateAlipayNum, trigger: 'change'}]
            },
            is_takeRadio: '3',
            is_take: ''
        }
    },
    watch: {
        is_takeRadio: {
            handler: function(val) {
                if (val == 1) {
                    this.form.is_take = '999'
                } else if (val == 2 ){
                    this.form.is_take = '0'
                }   else if (val == 3 ){
                    this.form.is_take = this.is_take
                }
            }
        }
    },
    methods: {
        closed() {
            Object.assign(this.$data, this.$options.data())
            this.$refs['form'].resetFields()
        },
        showOn(data) {
            this.form.email_work = data.email_work
            this.form.type = data.type
            this.form.bank_card = data.bank_card
            this.form.registered_bank = data.register_bank
            this.form.alipay_num = data.alipay_num
            this.form.is_take = data.is_take
            this.is_take = data.is_take
            this.agent_id = data.id
            this.is_show = true
            this.$nextTick(() => {
                this.$refs['form'].clearValidate()
            })
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.editPost()
                }
            })
        },

        editPost() {
            let params = {
                email_work: this.form.email_work,
                type: this.form.type,
                is_take: this.form.is_take,
            }
            if (this.form.registered_bank) {
                params.register_bank = this.form.registered_bank
            }
            if (this.form.bank_card) {
                params.bank_card = this.form.bank_card
            }
            if (this.form.alipay_num) {
                params.alipay_num = this.form.alipay_num
            }
            if (this.form.grade != '') {
                params.grade = this.form.grade
            }
            this.$axios.put(`/api/agent/${this.agent_id}`, params).then(res => {
                if (res.data.code == 200) {
                    this.is_show = false
                    this.$emit('refresh')
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            }).catch(e => {
                console.log(e)
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-dialog__body {
        padding-top: 20px !important;
        height: 450px;
    }
    .is_take {
        width: 100px;
    }
}
/deep/.el-select {
    width: 100%;
}
</style>
